<template>
  <view class="container">
    <!-- 订单号输入 -->
    <view class="form-group">
      <label>订单号:</label>
      <input type="text" v-model="orderNumber" placeholder="请输入订单号" />
    </view>


	<view class="form-group">
		<label>选择仓库:</label>
		<picker mode="selector" :range="warehouseList" range-key="warehouseName" @change="onWarehouseChange">
        <view class="picker">
          {{ selectedWarehouse.warehouseName || '请选择仓库' }}
        </view>
      </picker>
    </view>
	
	<view class="form-item">
	  <text class="label">分类：</text>
	  <picker mode="selector" :range="categories" range-key="className" @change="onCategoryChange">
	    <view class="picker">{{ selectedCategory.className || '请选择分类' }}</view>
	  </picker>
	</view>

    <view class="form-group">
      <label>选择货物:</label>
      <picker mode="selector" :range="goodsList" range-key="matName" @change="onGoodsChange">
        <view class="picker">
          {{ selectedGoods.matName || '请选择货物' }}
        </view>
      </picker>
    </view>

    <view class="form-group">
      <label>输入数量:</label>
      <input type="number" v-model="quantity" placeholder="请输入数量" />
    </view>

    <button type="primary" @click="submitSelection">提交</button>

    <view v-if="submitted" class="result">
      <view>仓库: {{ selectedWarehouse.name }}</view>
      <view>货物: {{ selectedGoods.name }}</view>
      <view>数量: {{ quantity }}</view>
    </view>
  </view>
</template>

<script>
	
	import {goodListByCat,getWarehouse,pringter} from '@/api/admin.js'
export default {
  data() {
    return {
		orderNumber:0,
      goodsList: [
        { id: 1, name: '货物A' },
        { id: 2, name: '货物B' },
        { id: 3, name: '货物C' }
      ],
      selectedWarehouse: {},
      selectedGoods: {},
      quantity: 1,
      submitted: false,
	  selectedCategory:{}
    };
  },
  props:{
		categories: {
			type: Array,
			default: []
		},
		warehouseList:{
			type: Array,
			default: []
		}
  },
  onload(){
	  getWarehouse().then(res=>{
		  console.log("ware",res);
		  if(res.code==200){
			  this.warehouses = res.data
		  }else{
			  uni.showToast({
			  	title:'获取仓库信息失败',
				duration:1500
			  })
		  }
	  })
  },
  name:"newStorageForm",
  methods: {
	onCategoryChange(event){
		  const { value } = event.detail;
		  this.selectedCategory = this.categories[value];
			goodListByCat(this.selectedCategory.matClass).then(res=>{
				console.log("good",res)
				if(res.code==200){
					this.goodsList=res.data
				}else{
					uni.showToast({
						title:'获取货物信息失败',
						duration:1500
					})
				}
		})

	},
    onWarehouseChange(e) {
      this.selectedWarehouse = this.warehouses[e.detail.value];
    },
    onGoodsChange(e) {
      this.selectedGoods = this.goodsList[e.detail.value];
    },
    submitSelection() {
      if ( this.selectedGoods.matName && this.quantity > 0) {
        this.submitted = true;
		let form = {
			targetType:3,
			targetId:this.selectedGoods.matId,
			number:this.quantity,
		}
		pringter(form).then(res=>{
			console.log(res)
		})
		// console.log()
      } else {
        uni.showToast({
          title: '请完整选择仓库、货物并输入有效数量',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.form-group {
  margin-bottom: 20px;
}
.picker {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}
.result {
  margin-top: 20px;
}
button {
  width: 100%;
  margin-top: 20px;
}

.divider {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ccc;
  transform: translateY(-50%);
}
.divider-with-text text {
  background-color: #fff; /* 背景色与容器相同 */
  padding: 0 10px;
}
</style>
